<script>
  function KeypressCtrl($scope) {
    $scope.keypressCallback = function ($event) {
      alert('Voila!');
      $event.preventDefault();
    };
  }
</script>
<section id="keypress" ng-controller="KeypressCtrl">
  <div class="page-header">
    <h1>Keypress</h1>
  </div>
  <div class="row">
    <div class="span6">
      <h3>What?</h3>

      <p>Bind an event to a particular keypress</p>

      <p><textarea ui-keypress="{13:'keypressCallback($event)'}">ui-keypress

        Hit [Enter]. The $event here is different from keypress, but fires earlier.</textarea></p>

      <p><textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}">ui-keydown

        Hit [Enter] or [Alt]+[Space] and remember that this normally adds a new line if we don't $event.preventDefault()</textarea>
      </p>

      <p><textarea ui-keyup="{'enter':'keypressCallback($event)'}">ui-keyup

        Hit [Enter]. Remember not to close the alert using [Enter] or it will refire keyup.</textarea></p>
    </div>
    <div class="span6">
      <h3>Why?</h3>

      <p>Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...</p>

      <h3>How?</h3>

      <p>The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param</p>

      <p class="alert alert-info">Note that <strong>13</strong> represents the <code>RETURN</code> key code.</p>
<pre class="prettyprint">
&lt;textarea
        ui-keypress=&quot;{13:'keypressCallback($event)'}&quot;&gt;
&lt;/textarea&gt;
&lt;textarea
        ui-keydown=&quot;{'enter alt-space':'keypressCallback($event)'}&quot;&gt;
&lt;/textarea&gt;
&lt;textarea
        ui-keyup=&quot;{'enter':'keypressCallback($event)'}&quot;&gt;
&lt;/textarea&gt;

&lt;script&gt;
    $scope.keypressCallback = function($event) {
        alert('Voila!');
        $event.preventDefault();
    };
&lt;/script&gt;
</pre>
    </div>
  </div>
</section>